<script setup lang="ts">
import { defineComponent, h } from 'vue';

import { BankOutlined, CopyOutlined } from '@ant-design/icons-vue';
import { Space, Tag } from 'ant-design-vue';

import { errimage } from '#/base';
import { copyToClipboard, formatMoney } from '#/utils';

const props = defineProps({
  orderInfo: {
    type: Object,
    default: () => ({}),
  },
});
const record = props.orderInfo;

const VNodes = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const itemster = JSON.parse(props.vnodes.spec)
      .map((item: any) => item.value)
      .join(';');
    return {
      itemster,
    };
  },
  render() {
    return h(Space, {}, [
      h('div', {}, this.itemster),

      h(
        Tag,
        { color: 'blue' },
        `¥${formatMoney(this.vnodes.goodsPrice)} x ${this.vnodes.itemNum}件`,
      ),
    ]);
  },
});
// function getSkuName(item: any) {
//   return 123456
// }
</script>

<template>
  <div>
    <a-space :size="0" direction="vertical">
      <a-space>
        <a-tag color="orange"> <BankOutlined /> {{ record.shopName }} </a-tag>
      </a-space>
      <a-space direction="vertical">
        <a-space :size="2">
          <div class="text-sm">店铺订单号：</div>
          <div class="text-xs text-gray-500">
            {{ record.dyOrderId }}
          </div>
          <a-button
            shape="round"
            type="link"
            @click="
              () => {
                copyToClipboard(record.dyOrderId);
              }
            "
          >
            <template #icon>
              <CopyOutlined class="text-xs" />
            </template>
          </a-button>
        </a-space>
      </a-space>

      <a-divider style="margin: 0" />
      <a-space align="start" class="mt-2">
        <div>
          <a-image
            :fallback="errimage"
            :src="record.mainPic || 'err'"
            :width="60"
            style="border-radius: 8px"
          />
        </div>
        <a-space :size="0" direction="vertical">
          <a-space>
            <a-tooltip>
              <template #title>{{ record.goodsTitle }}</template>
              <div class="w-52 truncate">{{ record.goodsTitle }}</div>
            </a-tooltip>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(record.goodsTitle);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
          <a-space>
            <div class="text-xs">商品ID:</div>
            <div class="text-xs text-gray-500">{{ record.productId }}</div>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(record.productId);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
          <a-space align="start">
            <div class="text-xs">订单规格:</div>
            <a-popover title="规格详情">
              <template #content>
                <a-space
                  v-if="record.skuList && record.skuList.length > 0"
                  direction="vertical"
                >
                  <div v-for="item in record.skuList" :key="item.code">
                    <!-- :{{ item.itemNum }} -->
                    <VNodes :vnodes="item" />
                  </div>
                </a-space>
                <div v-else>
                  {{ record.skuStr }}
                </div>
              </template>
              <div
                class="w-48 cursor-pointer truncate text-xs text-gray-500 underline decoration-orange-600 decoration-double"
              >
                {{ record.skuStr }}
              </div>
            </a-popover>
          </a-space>
          <a-space align="start">
            <div class="text-xs">单价数量:</div>
            <div v-if="record.goodsPrice" class="text-xs text-gray-500">
              ¥{{ formatMoney(record.goodsPrice) }} x {{ record.quantity }}件
            </div>
          </a-space>
          <a-space class="mb-2">
            <div class="text-xs">实收:</div>
            <div class="text-base text-red-500">
              ¥{{ formatMoney(record.dyAmount) }}
            </div>
            <a-tag v-if="record.postAmount" color="blue">
              运费:{{ formatMoney(record.postAmount) }} 元
            </a-tag>
            <a-tag v-if="record.promotionAmount" color="blue">
              优惠:{{ formatMoney(record.promotionAmount) }} 元
            </a-tag>
          </a-space>
        </a-space>
      </a-space>
      <a-divider style="margin: 0" />
      <div>
        <a-space :size="0" direction="vertical">
          <a-space>
            <div class="text-xs">买家备注:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ record.buyerRemark || '买家未填写备注' }}
            </div>
          </a-space>
          <a-space>
            <div class="text-xs">商家备注:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ record.remark || '未填写备注' }}
            </div>
          </a-space>

          <a-space align="start">
            <div class="text-xs">收货地址:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ record.province }} {{ record.city }} {{ record.town }}
              {{ record.address }}
              {{ record.fullName }}
            </div>
          </a-space>
        </a-space>
      </div>
    </a-space>
  </div>
</template>
